<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>电桩管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-button size="small" @click="exportExcel">导出Excel</el-button>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="stationName" placeholder="请输入充电桩名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="type" placeholder="请输入充电桩类型(快/慢)"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select size="small" v-model="stationStatus" placeholder="请选择充电桩状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="siteName" placeholder="请输入站点名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select size="small" v-model="siteStatus" placeholder="请选择站点状态">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="userName" placeholder="请输入桩主用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="phone" placeholder="请输入桩主手机号"></el-input>
            </el-form-item>
            <!-- <el-form-item>
                <el-select size="small" v-model="userType" placeholder="请选择是否平台合伙人">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="OpenPi()">批量添加充电价格</el-button>
            </el-form-item>
        </el-form>
        <!-- 列表 -->
        <el-table size="small" ref="multipleTable" :data="electricData" element-loading-text="拼命加载中" style="width: 100%;"
            v-horizontal-scroll>
            <el-table-column align="center" sortable type="index" label="序号"></el-table-column>
            <el-table-column align="center" sortable prop="stationName" label="充电桩名称" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="state" label="审核状态" :formatter="State"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="price" label="价格(元/度)" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.price / 10000 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="servicePrice" label="服务费(元/度)" width="130">
                <template slot-scope="scope">
                    <div>{{ scope.row.servicePrice / 10000 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="voltage" label="电压" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.voltage / 100 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="current" label="电流" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.current / 100 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="power" label="功率(kw)" width="120">
                <template slot-scope="scope">
                    <div>{{ scope.row.power / 100 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="type" label="类型" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="status" :formatter="Status" label="状态"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="siteName" label="站点名" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="siteStatus" label="站点状态" :formatter="siteStatusS"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="userName" label="桩主用户名" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="phone" label="桩主手机号" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="userType" label="是否平台合伙人" :formatter="userTypeS"
                width="130"></el-table-column>
            <el-table-column align="center" sortable prop="createTime" label="创建时间" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.createTime">{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" fixed="right" width="460">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="primary" @click="bangding(scope.row)">二维码</el-button> -->
                    <el-button size="mini" type="primary" @click="openPrice(scope.row)">设置充电桩价格</el-button>
                    <el-button size="mini" type="primary" @click="openElectric(scope.row)">查看详情</el-button>
                    <el-button size="mini" type="primary" @click="ShenheYes(scope.row)"
                        v-if="scope.row.state === 0">审核通过</el-button>
                    <el-button size="mini" type="danger" @click="ShenheNo(scope.row)"
                        v-if="scope.row.state === 0">审核不通过</el-button>
                    <el-button size="mini" type="info" disabled v-if="scope.row.state === 1">已审核</el-button>
                    <el-button size="mini" type="info" disabled v-if="scope.row.state === 2">已审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 查看详情 -->
        <el-dialog title="电桩详情页：" :visible.sync="editFormDetails">
            <el-form label-width="150px">
                <el-form-item label="充电桩名称：">
                    <span v-html="this.Details.stationName"></span>
                </el-form-item>
                <el-form-item label="价格(元/度)：">
                    <span v-html="this.Details.price / 10000"></span>
                </el-form-item>
                <el-form-item label="服务费(元/度)：">
                    <span v-html="this.Details.servicePrice / 10000"></span>
                </el-form-item>
                <el-form-item label="电压：">
                    <span v-html="this.Details.voltage / 100"></span>
                </el-form-item>
                <el-form-item label="电流：">
                    <span v-html="this.Details.current / 100"></span>
                </el-form-item>
                <el-form-item label="功率(kw)：">
                    <span v-html="this.Details.power / 100"></span>
                </el-form-item>
                <el-form-item label="类型：">
                    <span v-html="this.Details.type"></span>
                </el-form-item>
                <el-form-item label="充电桩状态：">
                    <span v-if="this.Details.status == 0">开放</span>
                    <span v-if="this.Details.status == 1">休息</span>
                    <span v-if="this.Details.status == 2">故障</span>
                </el-form-item>
                <el-form-item label="站点状态：">
                    <span v-if="this.Details.siteStatus == 0">开放</span>
                    <span v-if="this.Details.siteStatus == 1">休息</span>
                    <span v-if="this.Details.siteStatus == 2">故障</span>
                    <span v-if="this.Details.siteStatus == 3">认领</span>
                </el-form-item>
                <el-form-item label="端口数量：">
                    <span v-html="this.Details.stationPortCount"></span>
                </el-form-item>
                <el-form-item label="端口状态：" v-if="this.Details.stationPortCount != 0">
                    <el-table size="small" :data="this.Details.stationPortList" border>
                        <el-table-column align="center" sortable type="index" label="序号"></el-table-column>
                        <el-table-column align="center" sortable prop="portName" label="端口名称"></el-table-column>
                        <el-table-column align="center" sortable prop="portStatus" :formatter="PortStatus"
                            label="端口状态"></el-table-column>
                        <el-table-column align="center" sortable prop="createTime" label="创建时间">
                            <template slot-scope="scope">
                                <div>{{ transformDate(scope.row.createTime) }}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="桩主用户名：">
                    <span v-html="this.Details.userName"></span>
                </el-form-item>
                <el-form-item label="桩主手机号：">
                    <span v-html="this.Details.phone"></span>
                </el-form-item>
                <el-form-item label="是否平台合伙人：">
                    <span v-if="this.Details.userType == 0">普通合伙人</span>
                    <span v-if="this.Details.userType == 1">平台合伙人</span>
                </el-form-item>
                <el-form-item label="创建时间：" prop="createTime">
                    {{ transformDate(this.Details.createTime) }}
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 批量编辑界面 -->
        <el-dialog title="批量添加" :visible.sync="editFormVisiiblePi" width="60%">
            <el-form label-width="120px">
                <el-form-item label="充电桩名称">
                    <el-checkbox-group v-model="piliang.stationIds">
                        <el-checkbox v-for="item in checkItems" :key="item.id" :label="item.id">{{ item.name
                                                    }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="价格类别">
                    <ul style="display: flex; margin: 0%;padding: 0%;" v-for="(item, index) in   piliang.type  "
                        :key="index">
                        <li style="list-style: none; display: flex; align-items: center; margin-top: 4px">
                            <el-button type="primary" icon="el-icon-minus" circle @click="deleItemType(index)" size="mini"
                                v-if="piliang.type.length > 1"></el-button>

                            <el-input placeholder="请输入类别名称" v-model="item.priceTypeName" size="small"
                                style="margin: 0 4px; width:240px">
                                <template slot="prepend">类别名称</template>

                            </el-input>
                            <el-input placeholder="请输入电费" v-model="item.stationPrice" size="small"
                                style="margin: 0 4px;width:240px">
                                <template slot="prepend">电费</template>
                                <template slot="suffix">元/度</template>
                            </el-input>
                            <el-input placeholder="请输入服务费" v-model="item.servicePrice" size="small"
                                style="margin: 0 4px;width:240px">
                                <template slot="prepend">服务费</template>
                                <template slot="suffix">元/度</template>
                            </el-input>
                            <el-button type="primary" icon="el-icon-plus" circle @click="addItemType" size="mini"
                                v-if="index === piliang.type.length - 1 && index != 3"></el-button>
                        </li>
                    </ul>
                </el-form-item>
                <el-form-item label="价格设置">
                    <ul style="display: flex; margin: 0%;padding: 0%;" v-for="(  item, index  ) in    piliang.price   "
                        :key="index">
                        <li style="list-style: none; display: flex; align-items: center;">
                            <el-button type="primary" icon="el-icon-minus" circle @click="deleItemPrice(index)" size="mini"
                                v-if="piliang.price.length > 1"></el-button>
                            <el-time-select size="small" :picker-options="{ start: '00:00', step: '01:00', end: '24:00' }"
                                v-model="item.start" placeholder="选择开始时间"
                                style="margin: 0 4px;width:234px"></el-time-select>
                            至
                            <el-time-select size="small" :picker-options="{ start: '00:00', step: '01:00', end: '24:00' }"
                                v-model="item.end" placeholder="选择结束时间" style="margin: 0 4px;width:234px"></el-time-select>
                            <el-select v-model="item.priceType" placeholder="请选择价格类型" size="small"
                                style="margin: 0 4px;width: 240px">
                                <el-option v-for="  (item, index)   in    piliang.type  " :key="index"
                                    :label="`${item.priceTypeName}：电费【${item.stationPrice}】服务费【${item.servicePrice}】`"
                                    :value="item.priceTypeName" style="width: 300px;">
                                    {{ item.priceTypeName + ":" + "电费" + "【" + item.stationPrice + '】' + "服务费" + "【" +
                                                                        item.servicePrice + '】' }}</el-option>
                            </el-select>
                            <el-button type="primary" icon="el-icon-plus" circle @click="addItemPrice" size="mini"
                                v-if="index === piliang.price.length - 1 && index != 47"></el-button>
                        </li>
                    </ul>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialogPi()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="addPrice()">添加</el-button>
            </div>
        </el-dialog>

        <!-- 生成绑定微信二维码界面 -->
        <el-dialog title="微信扫码绑定用户" :visible.sync="isShowCard" width="400px" center :before-close="jieBangClose">
            <!-- 定义一个展示二维码的div -->
            <div style="display: flex; justify-content: center">
                <!-- 二维码对象可以通过 ref 绑定 -->
                <div id="qrCode" ref="qrCodeDiv"></div>
            </div>
        </el-dialog>

        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    </div>
</template>

<script>
import {
    getStationAdminList,
    getAdminStationInfo,
    aduitStation,
    addBatchChargePrice
} from "../../api/userMG";
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import Pagination from '../../components/Pagination';
import QRCode from 'qrcode'
export default {
    data() {
        return {
            electricData: [],
            loading: false,
            stationName: '',
            type: '',
            stationStatus: '',
            siteId: '',
            siteName: '',
            siteStatus: '',
            userId: '',
            phone: '',
            userName: '',
            userType: '',
            options: [{
                value: 0,
                label: '开放'
            }, {
                value: 1,
                label: '休息'
            }, {
                value: 2,
                label: '故障'
            }],
            options1: [{
                value: 0,
                label: '开放'
            }, {
                value: 1,
                label: '休息'
            }, {
                value: 2,
                label: '故障'
            }, {
                value: 3,
                label: '认领'
            }],
            options2: [{
                value: 0,
                label: '普通合伙人'
            }, {
                value: 1,
                label: '平台合伙人'
            }],
            editFormDetails: false,
            Details: [],
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 20,
                total: 10
            },
            editFormVisiiblePi: false,
            checkItems: [],
            piliang: {
                stationIds: [],
                type: [{
                    priceTypeName: '',
                    stationPrice: '',
                    servicePrice: ''
                }],
                price: [{
                    start: '',
                    end: '',
                    priceType: ''
                }],
                createTime: '',
            },
            array: [{
                stationIds: '',
                start: '',
                end: '',
                name: '',
                price: '',
                servicePrice: '',
                createTime: '',
            }],
            editFormDetailsPrice: false,
            isShowCard: false,
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    created() {
        this.getdata(Number(localStorage.getItem("electircPicePage")) || 1);
    },
    methods: {
        jieBangClose() {
            this.isShowCard = false;
        },
        // 1. 方法调用 
        bangding(row) {
            let memberId = row.id;
            this.isShowCard = true;
            if (this.ids != null) {
                memberId = this.ids[0];
            }
            this.createQRCode(memberId);
        },
        //2. 具体的绑定方法
        createQRCode(id) {
            this.$nextTick(() => {
                this.$refs.qrCodeDiv.innerHTML = '';//二维码清除
                alert(id)
                new QRCode(this.$refs.qrCodeDiv, {
                    text: "id=" + id,//二维码链接，参数是否添加看需求
                    width: 200,//二维码宽度
                    height: 200,//二维码高度
                    colorDark: "#333333", //二维码颜色
                    colorLight: "#ffffff", //二维码背景色
                    // correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
                });
            })
        },
        // 批量添加价格
        addPrice() {
            for (let i = 0; i < this.piliang.price.length; i++) {
                this.array[i].stationIds = this.piliang.stationIds.toString()
                if (this.piliang.price[i].start.constructor !== Number) {
                    const parts = this.piliang.price[i].start.split(':');
                    this.piliang.price[i].start = parseInt(parts[0])
                }
                if (this.piliang.price[i].end.constructor !== Number) {
                    const partss = this.piliang.price[i].end.split(':');
                    this.piliang.price[i].end = parseInt(partss[0])
                }
                this.array[i].start = this.piliang.price[i].start
                this.array[i].end = this.piliang.price[i].end
                for (let j = 0; j < this.piliang.type.length; j++) {
                    if (this.piliang.type[j].priceTypeName === this.piliang.price[i].priceType) {
                        this.array[i].name = this.piliang.type[j].priceTypeName
                        this.piliang.type[j].stationPrice = (this.piliang.type[j].stationPrice * 10000).toFixed(0)
                        this.piliang.type[j].servicePrice = (this.piliang.type[j].servicePrice * 10000).toFixed(0)
                        this.array[i].price = this.piliang.type[j].stationPrice
                        this.array[i].servicePrice = this.piliang.type[j].servicePrice
                    }
                }
            }
            addBatchChargePrice({
                prices: JSON.stringify(this.array)
            }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiiblePi = false
                    this.$message.success(res.msg)
                } else {
                    this.editFormVisiiblePi = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 删除类型行
        deleItemType(index) {
            this.piliang.type.splice(index, 1); // 删除索引处的元素
        },
        // 添加类型行
        addItemType() {
            if (this.piliang.type.length < 4) {
                this.piliang.type.push({
                    priceTypeName: '',
                    stationPrice: '',
                    servicePrice: '',
                }); // 添加新项，保持 key 唯一性
            } else {
                this.$message({
                    message: '最多可设置4组价格类别哟',
                    type: 'warning'
                });
            }
        },
        // 删除价格行
        deleItemPrice(index) {
            this.piliang.price.splice(index, 1); // 删除索引处的元素
            this.array.splice(index, 1)
        },
        // 添加价格行
        addItemPrice() {
            if (this.piliang.price.length < 48) {
                this.piliang.price.push({
                    start: '',
                    end: '',
                    priceType: null,
                }); // 添加新项，保持 key 唯一性
                this.array.push({
                    stationIds: '',
                    start: '',
                    end: '',
                    name: '',
                    price: '',
                    servicePrice: '',
                    createTime: '',
                })
            } else {
                this.$message({
                    message: '最多可设置48个时段哟',
                    type: 'warning'
                });
            }
        },
        // 关闭批量编辑对话框
        closeDialogPi() {
            this.editFormVisiiblePi = false
            this.$message({
                type: 'info',
                message: '已取消编辑'
            })
        },
        // 批量传值
        OpenPi() {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.editFormVisiiblePi = true
                    this.piliang.type = [{
                        priceTypeName: '',
                        stationPrice: '',
                        servicePrice: ''
                    }]
                    this.piliang.price = [{
                        start: '',
                        end: '',
                        priceType: null,
                    }]
                    this.piliang.stationIds = []
                    this.piliang.createTime = ''
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 跳转页面
        openPrice(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    setTimeout(() => {
                        this.loading = false
                        // 跳转页面
                        this.$router.push({
                            path: '/chargingStation/ChargingStationPrice', query: {
                                id: row.id
                            }
                        })
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 站点状态
        State: function (row) {
            if (row.state == 0) {
                return "待审核"
            } else if (row.state == 1) {
                return "审核通过 "
            } else if (row.state == 2) {
                return "审核不通过"
            }
        },
        // 审核通过
        ShenheYes(row) {
            this.$confirm("确定通过吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "success",
            }).then(() => {
                let data = {
                    id: row.id,
                    state: 1
                }
                aduitStation(data).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        localStorage.setItem("electircPicePage", this.pageparm.currentPage);
                        location.reload()
                    } else {
                        this.$message.error(res.msg)
                    }
                })

            }).catch((err) => {
                this.$message({
                    type: "info",
                    message: "已取消通过",
                });
            });
            return
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.$confirm("确定通过吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "success",
                    }).then(() => {
                        let data = {
                            id: row.id,
                            state: 1
                        }
                        aduitStation(data).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                localStorage.setItem("electircPicePage", this.pageparm.currentPage);
                                location.reload()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })

                    }).catch((err) => {
                        this.$message({
                            type: "info",
                            message: "已取消通过",
                        });
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 审核不通过
        ShenheNo(row) {

            this.$confirm("确定不通过吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "error",
            }).then(() => {
                let data = {
                    id: row.id,
                    state: 2
                }
                aduitStation(data).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        localStorage.setItem("electircPicePage", this.pageparm.currentPage);
                        location.reload()
                    } else {
                        this.$message.error(res.msg)
                    }
                })

            }).catch((err) => {
                this.$message({
                    type: "info",
                    message: "已取消不通过",
                });
            });
            return
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {

                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 分页插件事件
        callFather(parm) {
            this.pageparm.page = parm.currentPage
            this.getdata(parm.currentPage)
        },
        exportExcel() {
            var parameter = {
                page: -2,
                stationName: this.stationName,
                type: this.type,
                stationStatus: this.stationStatus,
                siteId: this.siteId,
                siteName: this.siteName,
                siteStatus: this.siteStatus,
                userId: this.userId,
                phone: this.phone,
                userName: this.userName,
                userType: this.userType
            };
            getStationAdminList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.electricData = res.data.list;
                    return;
                }
            })
            setTimeout(() => {
                //转换成excel时，使用原始的格式
                var xlsxParam = { raw: true };
                let fix = document.querySelector(".el-table__fixed-right");
                let wb;
                //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
                if (fix) {
                    wb = XLSX.utils.table_to_book(
                        this.$refs.multipleTable.$el.removeChild(fix), xlsxParam
                    );
                    this.$refs.multipleTable.$el.appendChild(fix);
                } else {
                    wb = XLSX.utils.table_to_book(this.$refs.multipleTable.$el, xlsxParam);
                }
                var wbout = XLSX.write(wb, {
                    bookType: "xls",
                    bookSST: true,
                    type: "array",
                });
                try {
                    // 如果是IE浏览器，使用Blob通过navigator.msSaveBlob保存
                    if (navigator.msSaveBlob) {
                        navigator.msSaveBlob(new Blob([wbout], { type: 'application/octet-stream' }), '充电桩列表.xlsx');
                    } else {
                        // 在其他浏览器中使用file-saver保存文件
                        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '充电桩列表.xlsx');
                    }
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout);
                }
                return wbout;
            }, 1000);
            setTimeout(() => {
                this.getdata(1)
            }, 2000);
        },
        // 端口状态
        PortStatus: function (row) {
            if (row.portStatus == 0) {
                return "空闲"
            } else if (row.portStatus == 1) {
                return "使用中"
            } else if (row.portStatus == 2) {
                return "故障"
            }
        },
        // 打开详情页面
        openElectric(row) {
            this.loading = true;
            this.editFormDetails = true;
            let data = {
                id: row.id
            }
            getAdminStationInfo(data).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg
                    });
                } else {
                    this.Details = res.data.data;
                    return;
                }
            })
        },
        // 搜索数据
        search() {
            this.getdata(1)
        },
        // 重置数据
        chongzhi() {
            this.stationName = ''
            this.type = ''
            this.stationStatus = ''
            this.siteId = ''
            this.siteName = ''
            this.siteStatus = ''
            this.userId = ''
            this.phone = ''
            this.userName = ''
            this.userType = ''
            this.getdata(1)
        },
        // 是否为平台合伙人
        userTypeS: function (row) {
            if (row.userType == 0) {
                return "普通合伙人"
            } else if (row.userType == 1) {
                return "平台合伙人"
            }
        },
        // 站点状态
        siteStatusS: function (row) {
            if (row.siteStatus == 0) {
                return "开放"
            } else if (row.siteStatus == 1) {
                return "休息"
            } else if (row.siteStatus == 2) {
                return "故障"
            } else if (row.siteStatus == 3) {
                return "认领"
            }
        },
        // 状态
        Status: function (row) {
            if (row.status == 0) {
                return "开放"
            } else if (row.status == 1) {
                return "休息"
            } else if (row.status == 2) {
                return "故障"
            }
        },
        // 获取数据
        getdata(page) {
            this.loading = true;
            var parameter = {
                page: (page - 1) * 20,
                stationName: this.stationName,
                type: this.type,
                stationStatus: this.stationStatus,
                siteId: this.siteId,
                siteName: this.siteName,
                siteStatus: this.siteStatus,
                userId: this.userId,
                phone: this.phone,
                userName: this.userName,
                userType: this.userType
            };
            getStationAdminList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.electricData = res.data.list;
                    this.pageparm.currentPage = page;
                    this.pageparm.total = res.data.count;
                    res.data.list.forEach((item) => {
                        this.checkItems.push({ name: item.stationName, id: item.id })
                    })
                    return;
                }
            })
        },
    }
}
</script>

<style></style>